<template>
    <!-- :class="[message.flow === 'in' ? '' : 'reverse']" -->
    <view class="padBox" :class="[message.isDeleted ? 'del' : '']"></view>
    <view
        class="message-bubble d-r"
        bubble="true"
        :class="[
            message.flow === 'in' ? '' : 'reverse',
            message.isDeleted ? 'del' : '',
        ]"
    >
        <view class="avatar" :class="[message.isDeleted ? 'del' : '']"></view>
        <view class="message-area">
            <text
                class="name"
                :class="{isVip:isVip}"
                v-if="
                    message.conversationType !== 'C2C' && message.flow === 'in'
                "
                >{{ senderName }}</text
            >
            <view :class="['content content-' + message.flow]">
                <view style="max-width: 512rpx" :class="{android: systemInfo.platform === 'android'}">
                    <slot />
                </view>

                <loading-indicator
                    v-if="message.status === 'unSend'"
                    :style="{
                        color: '#666',
                        width: '16px',
                        height: '16px',
                        marginLeft: '10px',
                        marginRight: '10px',
                    }"
                    :animating="true"
                    class="uni-load-more__img uni-load-more__img--nvue"
                ></loading-indicator>
                <view
                    class="message-label fail"
                    v-if="message.status === 'fail'"
                    @tap="resend"
                >
                    <text class="text">!</text>
                </view>
                <view
                    class="message-label1"
                    :class="[!message.isPeerRead && 'unRead']"
                    v-if="
                        message.conversationType === 'C2C' &&
                        message.flow == 'out' &&
                        message.status === 'success'
                    "
                >
                    <text class="readStatu" v-if="!message.isPeerRead"
                        >未读</text
                    >
                    <text class="readStatu" v-else>已读</text>
                </view>
            </view>
        </view>

        <!-- <view class="message-label fail" v-if="message.status === 'fail'">!</view> -->
        <!-- <view class="message-label" :class="[!message.isPeerRead && 'unRead']"
      v-if="message.conversationType === 'C2C' && message.flow == 'out' && message.status !== 'fail'">
      <text class="readStatu" v-if="!message.isPeerRead">未读</text>
      <text class="readStatu" v-else>已读</text>
    </view> -->

        <!-- <userhead
            class="avatar1"
            width="80"
            height="80"
            style="
                position: absolute;
                width: 80rpx;
                height: 80rpx;
            "
            :saveKey="message?.from"
            :src="message?.avatar ||
                'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
        /> -->


        <view class="avatar1">
            <view class="img_box">
                <cacheimg
                    style="
                        width: 74rpx;
                        height: 74rpx;
                        border-radius: 40rpx;
                    "
					@longpress="atUser"
                    @tap="goUserDetail"
                    :saveKey="message?.from"
                    :url="
                        message?.avatar ||
                        'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
                    "
                    src="cache"
                ></cacheimg>

            </view>

            <!-- <userhead
                        width="74"
                        height="74"
                        @tap="goUserDetail"
                        @longpress="atUser"
                        :saveKey="message?.from"
                        :src="message?.avatar"
                    /> -->


            <image
                v-if="isVip === 2"
                style="position:absolute;left:0;bottom:0;width:80rpx;height:35.5rpx;"
                src="/static/svip.png"
            ></image>
            <image
                v-if="isVip === 1"
                style="position:absolute;left:0;bottom:0;width:80rpx;height:35.5rpx;"
                src="/static/vip.png"
            ></image>


        </view>


        <!-- <image class="avatar1" @tap="goUserDetail" :src="message?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
      alt=""></image> -->
    </view>
</template>

<script lang="ts">
import { defineComponent, watchEffect, reactive, toRefs, computed } from "vue";
import { imStore } from "@/store/imStore";
import cacheimg from "@/components/cacheimg.vue";
import userhead from "@/components/userhead.vue";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";




const messageBubble = defineComponent({
    props: {
        data: {
            type: Object,
            default: () => {
                return {};
            },
        },
        groupVipList: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    components: {
        cacheimg,
    },
    setup(props: any, ctx: any) {
        const IM_STORE = imStore();
		
		
        const systemInfo = systemInfoStore();

        const data = reactive({
            message: props.data as any,
            show: false,
        });

        const resend = async () => {
            uni.showActionSheet({
                title: "是否重发该条消息?",
                itemColor: "#23e2a6",
                itemList: ["确认"],
                success: async (res) => {
                    if (res.tapIndex === 0) {
                        await uni.$TUIKit.TUIChatServer.resendMessage(
                            data.message
                        );
                    }
                },
            });
        };
		/*
        watchEffect(() => {
            data.message = props.data;
        });
		*/
        const isVip = computed(()=>{
            return IM_STORE.vipMap[data.message.from];
        })

        const toggleDialog = () => {
            data.show = !data.show;
        };

        const stopPop = (e: any) => {
            e.preventDefault();
            e.stopPropagation();
        };

        const goUserDetail = async (e: any) => {
            // e.preventDefault();
            // e.stopPropagation();
            //let isInteraction = null;
			let isAdd = true;
            const { type } = IM_STORE.conversation;
			const userId = data.message.from;
            if (type === "GROUP") {
                const { groupCustomField } =
                    IM_STORE.conversation?.groupProfile;
                if (groupCustomField && groupCustomField.length) {
                    groupCustomField.forEach((item:any) => {
                        if (item.key === "isInteraction") {
                            //isInteraction = Number(item.value);
							isAdd = !item.value
                        }
                    });
                }
				//console.log("****************数据***************")
				//console.log(IM_STORE.groupMembers)
				//根据权限判断是否可添加好友
				const myRole = IM_STORE.conversation?.groupProfile?.selfInfo.role
				if(myRole == 'Owner' || myRole == 'Admin'){
					isAdd = true
					//isInteraction = 0
				}
				const targetUser = IM_STORE.groupMembers?.find((item:any) => item.userID == userId);
				if(targetUser?.role == 'Owner' || targetUser?.role == 'Admin'){
					isAdd = true
					//isInteraction = 0
				}
            }
			
            uni.navigateTo({
                url: `/pages/personalCenter/personalCenter?userId=${userId}&isAdd=${isAdd}&from=group`,
            });
        };

        const userId = data.message.from;

        const atUser = (e: any) => {

            e.preventDefault();
            e.stopPropagation();
            if (data.message.flow === "out") {
                return;
            }

            uni.$emit("atUser", data.message.from);
            uni.$emit("longPressLock");
        };
		//let nameCard:any = null
		const senderName = computed(() => {
			const nameID = props.data.conversationID + props.data.from;
			const showName = uni.getStorageSync(nameID);
			let friendInfo:any = IM_STORE.friends.find((item:any) => item.userID === props.data.from);
			if(friendInfo){
				if(friendInfo.remark) {
					uni.setStorageSync(nameID, friendInfo.remark);
					return friendInfo.remark
				}
			}
			/*
			let friendInfo:any = IM_STORE.friends.find((item:any) => item.userID === props.data.from);
			if(friendInfo){
				if(friendInfo.remark) {
					return friendInfo.remark
				}
			}
			*/
			let type  = IM_STORE?.conversation?.type;
			if (type === "GROUP") {
				let userData:any = IM_STORE.groupMembers.find((item:any) => item.userID === props.data.from);
				//console.log(userData)
				if(userData){
					if(userData.nameCard){
						uni.setStorageSync(nameID, userData.nameCard);
						return userData.nameCard
					}
					uni.setStorageSync(nameID, userData.nick);
					return userData.nick
				}
			}
			return showName
			//return props.data.nick
			//let nick = null;
			
			/*
		    let remark = null;
			let nameCard = null;
			let nick = null;
		    IM_STORE.friends.forEach((f: any) => {
		        if (f.userID === data?.message?.from) {
		            remark = f.remark;
		        }
		    });
			let type  = IM_STORE?.conversation?.type;
			if (type === "GROUP") {
				let userData:any = IM_STORE?.groupMembers.find((item:any) => item.userID === data?.message?.from);
				if(userData?.nameCard !='')nameCard = userData?.nameCard
				if(userData?.nick !='')nick = userData?.nick;
			}
		    //return remark || nameCard || data?.message?.nameCard || data?.message?.nick;
			return remark || nameCard || data?.message?.nameCard || nick;
			*/
		});
		/*
        const senderName = computed(() => {
            let remark = null;
			let nameCard = null;
			let nick = null;
            IM_STORE.friends.forEach((f: any) => {
                if (f.userID === data?.message?.from) {
                    remark = f.remark;
                }
            });
			let type  = IM_STORE?.conversation?.type;
			if (type === "GROUP") {
				let userData:any = IM_STORE?.groupMembers.find((item:any) => item.userID === data?.message?.from);
				if(userData?.nameCard !='')nameCard = userData?.nameCard
				if(userData?.nick !='')nick = userData?.nick;
			}
            //return remark || nameCard || data?.message?.nameCard || data?.message?.nick;
			return remark || nameCard || data?.message?.nameCard || nick;
        });
		*/
        return {
            ...toRefs(data),
            toggleDialog,
            goUserDetail,
            resend,
            atUser,
            senderName,
            stopPop,
            isVip,
            systemInfo,
        };
    },
});
export default messageBubble;
</script>
<style lang="scss" scoped>
.reverse {
    flex-direction: row-reverse !important;
    justify-content: flex-start;
}

.avatar {
    width: 100rpx;
    height: 90rpx;
    border-radius: 12rpx;
    //   transition-property:height;
    //   transition-duration:.35s;
    //   transition-timing-function: linear;

    //   &.del{
    //     height:0;
    //   }
}
.avatar1 {
    position: absolute;
    width: 80rpx;
    height: 90rpx;

    .img_box{
        width: 80rpx;
        height: 80rpx;
        display:flex;
        align-items: center;
        justify-content: center;
        border-radius: 40rpx;
        background:#fff;
        box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.1);

    }

    //   transition-property:height;
    //   transition-duration:.35s;
    //   transition-timing-function: linear;

    &.del {
        height: 0;
    }
}
.padBox {
    height: 15px;
    transition-property: height;
    transition-duration: 0.2s;
    transition-timing-function: linear;

    &.del {
        height: 0;
    }
}
.message-bubble {
    position: relative;
    display: flex;
    padding: 0 12px;
    flex-direction: row;
    align-items: center;
    overflow: hidden;

    transition-property: height, opacity;
    transition-duration: 0.2s;
    transition-timing-function: linear;

    &.del {
        height: 0;
    }
}

.message-area {
    display: flex;
    flex-direction: column;

    .name {
		height: 16px;
        font-weight: 400;
        font-size: 12px;
        color: #999999;
        letter-spacing: 0;
        &.isVip{
            color:#F19945;
        }
    }

    .content {
        // padding: 12px;
        position: relative;
        flex-direction: row;
        align-items: flex-end;
        .android{
            margin-top:3px;
        }

        &-in {
            // background: #FBFBFB;
            //border-radius: 0px 10px 10px 10px;
        }

        &-out {
            flex-direction: row-reverse;
            // background: #DCEAFD;
            //   border-radius: 10px 0px 10px 10px;
        }
    }
}

.message-label {
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #b6b8ba;
    .readStatu {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 12px;
        color: #b6b8ba;
        position: relative;
        margin: 0 5px;
    }
}

.message-label1 {
    position: relative;
    //bottom: 0;
    //left: -36px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #b6b8ba;

    .readStatu {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 12px;
        color: #b6b8ba;
        position: relative;
        margin: 0 5px;
    }
}

.fail {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #dd524d;
    display: flex;
    justify-content: center;
    align-items: center;
    .text {
        color: #fff;
    }
    margin: 0 5px;
}

.unRead {
    color: #679ce1;
}
</style>
